<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素选择器(pseudo-element selector)</title>
  <!-- 
    CSS的伪元素选择器（pseudo-element selector）用于选择元素的特定部分或位置。以下是一些常见的伪元素选择器及其说明： 
 
      1. ::before - 在元素内容之前插入生成的内容。 
      2. ::after - 在元素内容之后插入生成的内容。 
      3. ::first-line - 选择元素的第一行文本。 
      4. ::first-letter - 选择元素的第一个字母。 
      5. ::selection - 选择用户选择的部分（文本高亮部分）。 
      6. ::placeholder - 选择输入框的占位符文本
   -->
   <style>
      .pseudo-element-selector {
        width: 600px;
        background-color: bisque;
      }

      /* 在元素内容之前插入生成的内容 */
      .pseudo-element-selector::before {
        content: "Before ";
        color: red;
      }
      
      /* 在元素内容之后插入生成的内容 */
      .pseudo-element-selector::after {
        content: " After";
        color: blue;
      }
      
      /* 选择元素的第一行文本 */
      .pseudo-element-selector::first-line {
        color: green;
      }
      
      /* 选择元素的第一个字母 */
      .pseudo-element-selector::first-letter {
        font-size: 24px;
        color: purple;
      }
      
      /* 选择用户选择的部分（文本高亮部分） */
      .pseudo-element-selector::selection {
        background-color: yellow;
        color: saddlebrown;
      }

      /* 选择输入框的占位符文本 */
      input::placeholder {
        color: red;
      }

      /* 方案 */
      .item::before {
        content: "Before ";
        color: orangered;
        font-size: 26px;
      }

      .item::after {
        /* content: " After"; */
        content: url("../../images/hot_icon.svg");
        color: blueviolet;
        font-size: 26px;

        /* 相对定位调整位置 */
        position: relative;
        left: 6px;
        top: 2px;
      }

      /* 补充 - ::after是(inline)行内级元素 */
      .pseudo-element-box03::before {
        /* 伪元素不可将content省略 */
        content: "";

        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: saddlebrown;
        border-radius: 50%;
        vertical-align: middle;
      }
   </style>
</head>
<body>

  <div class="pseudo-element-selector">
    <span class="pseudo-element-test">
      CSS的伪元素选择器（pseudo-element selector）用于选择元素的特定部分或位置。以下是一些常见的伪元素选择器及其说明： 
        1. ::before - 在元素内容之前插入生成的内容。 
        2. ::after - 在元素内容之后插入生成的内容。 
        3. ::first-line - 选择元素的第一行文本。 
        4. ::first-letter - 选择元素的第一个字母。 
        5. ::selection - 选择用户选择的部分（文本高亮部分）。 
        6. ::placeholder - 选择输入框的占位符文本
    </span>
  </div>
  <input type="text" placeholder="请输入内容">

  <!-- 方案 -->
  <div class="pseudo-element-box01 item">
    pseudo-class01
  </div>
  <div class="pseudo-element-box02 item">
    pseudo-class02
  </div>

  <!-- 补充 -->
  <div class="pseudo-element-box03">
    pseudo-class03
  </div>
  
</body>
</html>